<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title>手机Web服务</title>
    <!-- 引入配置文件 -->
    <script src="config.js"></script>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="lib/bootstrap-5.3.3/bootstrap.min.css">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">

    <link rel="stylesheet" href="css/upload.css">

    <style>
        :root {
            --bs-body-bg: #f8f9fa;
            --bs-body-color: #212529;
            --bs-card-bg: #ffffff;
            --bs-card-color: #212529;
            --bs-clipboard-bg: #e9ecef;
            --bs-display-bg: #ffffff;
            --bs-display-color: #212529;
        }

        [data-bs-theme="dark"] {
            --bs-body-bg: #212529;
            --bs-body-color: #f8f9fa;
            --bs-card-bg: #2c3034;
            --bs-card-color: #f8f9fa;
            --bs-clipboard-bg: #343a40;
            --bs-display-bg: #495057;
            --bs-display-color: #f8f9fa;
        }

        body {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            padding-top: 20px;
            transition: background-color 0.3s, color 0.3s;
        }

        .service-card {
            transition: transform 0.2s, background-color 0.3s, color 0.3s;
            margin-bottom: 20px;
            height: 100%;
            background-color: var(--bs-card-bg);
            color: var(--bs-card-color);
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .card-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .clipboard-section {
            background-color: var(--bs-clipboard-bg);
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px;
            transition: background-color 0.3s;
        }

        .btn-clipboard {
            width: 100%;
        }

        #clipboardDisplay {
            background-color: var(--bs-display-bg);
            color: var(--bs-display-color);
            transition: background-color 0.3s, color 0.3s;
        }


        #clipboardContent {
            background-color: var(--bs-card-bg);
            color: var(--bs-card-color);
            white-space: pre-wrap;
            word-wrap: break-word;
            resize: none;
            overflow-y: auto;
            min-height: 100px;
        }

        #clipboardContentDisplay {
            background-color: var(--bs-card-bg);
            color: var(--bs-card-color);
            white-space: pre-wrap;
            word-wrap: break-word;
            resize: none;
            overflow-y: auto;
            min-height: 100px;
        }

        /* 新增的标题区域样式 */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .title-container {
            flex-grow: 1;
            text-align: center;
        }


        /* 输入文本框清空按钮样式 */
        .btn-clear {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10;
            opacity: 0.7;
        }
        .btn-clear:hover {
            opacity: 1;
        }
        .textarea-container {
            position: relative;
        }

    </style>
</head>
<body>
<div class="container">
    <!-- 主题切换开关 -->
    <div class="header-container">
        <div style="width: 100px;"> <!-- 右侧占位保持平衡 -->
            <!-- 可以留空或添加其他元素 -->
        </div>
        <div class="title-container">
            <h1 class="display-5">手机Web服务</h1>
            <p class="lead text-muted">便捷的文件管理和剪切板工具</p>
        </div>
        <div class="form-check form-switch align-self-start">
            <input class="form-check-input" type="checkbox" id="themeSwitch">
            <label class="form-check-label" for="themeSwitch">
                <i class="bi bi-moon-stars"></i> 暗黑模式
            </label>
        </div>
    </div>

    <!-- 剪切板功能区域 -->
    <div class="clipboard-section mb-4">
        <h4 class="mb-3"><i class="bi bi-clipboard"></i> 剪切板工具</h4>
        <div class="row">
            <div class="col-md-6 mb-3">
                <!-- <textarea id="clipboardContent" class="form-control" rows="3" placeholder="在这里输入或粘贴内容..."></textarea> -->
                <!-- <label for="clipboardContent" class="form-label">输入或粘贴内容</label> -->
                <div class="textarea-container">
                    <textarea id="clipboardContent" class="form-control clipboard-textarea" rows="3" placeholder="在这里输入或粘贴内容..."></textarea>
                    <button class="btn btn-sm btn-outline-secondary btn-clear" onclick="clearInputText()">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-6">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary btn-clipboard" id="getClipboardBtn">
                        <i class="bi bi-clipboard-plus"></i> 获取剪切板内容
                    </button>
                    <button class="btn btn-success btn-clipboard" id="setClipboardBtn">
                        <i class="bi bi-clipboard-check"></i> 设置剪切板内容
                    </button>
                </div>
                <!-- 修改后的剪切板内容显示区域 -->
                <div class="mt-3 p-3 rounded" id="clipboardDisplay" style="display: none;">
                    <h6>获取到的剪切板内容:</h6>
                    <textarea id="clipboardContentDisplay" class="form-control p-2 rounded mt-2" rows="5" readonly></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- 服务功能卡片 -->
    <h4 class="mb-3"><i class="bi bi-collection"></i> 服务功能</h4>
    <div class="row">
        <!-- Clean Cache -->
        <div class="col-md-4">
            <div class="card service-card">
                <div class="card-body text-center">
                    <div class="card-icon text-primary">
                        <i class="bi bi-trash"></i>
                    </div>
                    <h5 class="card-title">清理缓存</h5>
                    <p class="card-text text-muted">清除系统缓存数据</p>
                    <!-- <a href="/api/clean-cache" class="btn btn-outline-primary">执行清理</a> -->
                    <button class="btn btn-outline-primary" id="cleanCacheBtn">执行清理</button>
                </div>
            </div>
        </div>

        <!-- File Manager -->
        <div class="col-md-4">
            <div class="card service-card">
                <div class="card-body text-center">
                    <div class="card-icon text-success">
                        <i class="bi bi-folder"></i>
                    </div>
                    <h5 class="card-title">内部存储</h5>
                    <p class="card-text text-muted">浏览和管理手机文件</p>
                    <a href="file.html" class="btn btn-outline-success" target="_blank">打开文件管理器</a>
                </div>
            </div>
        </div>

        <!-- Photo Album -->
        <div class="col-md-4">
            <div class="card service-card">
                <div class="card-body text-center">
                    <div class="card-icon text-info">
                        <i class="bi bi-images"></i>
                    </div>
                    <h5 class="card-title">相册浏览</h5>
                    <p class="card-text text-muted">查看手机相册图片</p>
                    <a href="photo.html" class="btn btn-outline-info" target="_blank">打开相册</a>
                </div>
            </div>
        </div>

        <!-- 在现有服务卡片区域添加 -->
        <div class="col-md-4">
            <div class="card service-card">
                <div class="card-body text-center">
                    <div class="card-icon text-warning">
                        <i class="bi bi-cloud-arrow-up"></i>
                    </div>
                    <h5 class="card-title">文件上传</h5>
                    <p class="card-text text-muted">上传文件到手机存储</p>
                    <button class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#uploadModal">
                        打开上传器
                    </button>
                </div>
            </div>
        </div>

        <!-- File Manager -->
        <div class="col-md-4">
            <div class="card service-card">
                <div class="card-body text-center">
                    <div class="card-icon text-success">
                        <i class="bi bi-folder"></i>
                    </div>
                    <h5 class="card-title">文件管理</h5>
                    <p class="card-text text-muted">浏览和管理手机文件</p>
                    <a href="file2.html" class="btn btn-outline-success" target="_blank">打开文件管理器</a>
                </div>
            </div>
        </div>

    </div>

    <!-- 未来扩展区域 -->
    <div class="mt-5">
        <h4 class="mb-3"><i class="bi bi-plus-circle"></i> 更多功能</h4>
        <div class="alert alert-info">
            未来将添加更多实用功能，敬请期待！
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS 和依赖 -->
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-5.3.3/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
    // 使用配置
    console.log("------------打印配置------------");
    console.log(Config.API_URL);
    console.log("------------打印配置------------");

    // 主题切换功能
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    // 初始化主题
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && prefersDark)) {
        $('html').attr('data-bs-theme', 'dark');
        $('#themeSwitch').prop('checked', true);
    }

    // 切换主题
    $('#themeSwitch').on('change', function() {
        if ($(this).is(':checked')) {
            $('html').attr('data-bs-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        } else {
            $('html').removeAttr('data-bs-theme');
            localStorage.setItem('theme', 'light');
        }
    });

    // 剪切板按钮事件
    $('#getClipboardBtn').on('click', getClipboard);
    $('#setClipboardBtn').on('click', setClipboard);
    $('#cleanCacheBtn').on('click', cleanCache);
});

function getClipboard() {
    const apiUrl = Config.API_URL + '/api/get-clipboard';
    const $displayArea = $('#clipboardDisplay');
    const $contentDisplay = $('#clipboardContentDisplay');

    $.ajax({
        url: apiUrl,
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            if (data && data.data && data.code === 200) {
                $('#clipboardContent').val(data.data);
                //$contentDisplay.val(data.data);
                //$displayArea.show();
                showToast('成功获取剪切板内容', 'success');
            } else {
                showToast(data.message, 'danger');
                //showToast('剪切板内容为空', 'info');
                $displayArea.hide();
            }
        },
        error: function(xhr, status, err) {
            console.error('获取剪切板失败:', err);
            showToast('获取剪切板失败: ' + err, 'danger');
            $displayArea.hide();
        }
    });
}

function setClipboard() {
    const apiUrl = Config.API_URL + '/api/set-clipboard';
    const content = $('#clipboardContent').val().trim();

    if (!content) {
        showToast('请输入要设置的内容', 'warning');
        return;
    }

    $.ajax({
        url: apiUrl,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ content: content }),
        success: function(data) {
            if (data && data.code && data.code === 200) {
                showToast('剪切板内容已更新', 'success');
            } else {
                //showToast('剪切板更新失败', 'warning');
                showToast(data.message, 'danger');
            }
        },
        error: function(xhr, status, err) {
            console.error('设置剪切板失败:', err);
            showToast('设置剪切板失败: ' + err, 'danger');
        }
    });
}

// 添加cleanCache函数
function cleanCache() {
    const apiUrl = Config.API_URL + '/api/clean-cache';

    $.ajax({
        url: apiUrl,
        method: 'GET',  // 根据你的API设计，可能是GET或POST
        success: function (data) {
            if (data && data.code && data.code === 200) {
                showToast('缓存清理成功', 'success');
            } else {
                showToast('缓存清理失败', 'warning');
            }
        },
        error: function (xhr, status, err) {
            console.error('清理缓存失败:', err);
            showToast('清理缓存失败: ' + err, 'danger');
        }
    });
}

    // 清空输入文本框
    function clearInputText() {
        $('#clipboardContent').val('');
    }

    // 清空输出文本框
    function clearOutputText() {
        $('#clipboardContentDisplay').val('');
    }

function showToast(message, type) {
    const toastHtml = `
        <div class="position-fixed bottom-0 end-0 p-3">
            <div class="toast show align-items-center text-white bg-${type} border-0" role="alert">
                <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        </div>
    `;

    const $toast = $(toastHtml).appendTo('body');

    // 3秒后自动移除
    setTimeout(() => {
        $toast.remove();
    }, 3000);
}
</script>

<!-- 上传文件模态框 -->
<div class="modal " id="uploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">上传文件</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 拖放上传区域 -->
                <div id="uploadDropZone" class="border rounded p-5 text-center mb-3">
                    <i class="bi bi-cloud-arrow-up fs-1"></i>
                    <p class="mt-2">拖放文件到此处或点击选择</p>
                    <input type="file" id="fileInput" class="d-none" multiple>
                    <button class="btn btn-sm btn-outline-primary mt-2" onclick="document.getElementById('fileInput').click()">
                        选择文件
                    </button>
                </div>

                <!-- 上传进度 -->
                <div id="uploadProgressContainer" class="d-none">
                    <div class="progress mb-3">
                        <div id="uploadProgressBar" class="progress-bar" style="width: 0%"></div>
                    </div>
                    <p id="uploadStatusText" class="small mb-0"></p>
                </div>

                <!-- 上传历史（可选） -->
                <div class="mt-4">
                    <h6>最近上传</h6>
                    <ul id="uploadHistory" class="list-group"></ul>
                </div>
            </div>
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>-->
<!--            </div>-->
        </div>
    </div>
</div>

</body>

<script src="js/upload.js"></script>

</html>